<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <link href="css/base.css" rel="stylesheet"/>
    <link href="css/register.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
    $(function(){
    	$(".subForm").click(function(){
    		var user = document.getElementById("username");
    		if(user.validity.valueMissing){
    			user.setCustomValidity("用户名不能为空")
    		}else if(user.validity.patternMismatch){
    			user.setCustomValidity("4到16位（可包含字母，数字，下划线，减号）")
    		}else{
    			user.setCustomValidity("")
    		}
    		var pwd = document.getElementById("password");
    		if(pwd.validity.valueMissing){
    			pwd.setCustomValidity("密码不能为空")
    		}else if(pwd.validity.patternMismatch){
    			pwd.setCustomValidity("至少6位")
    		}else{
    			pwd.setCustomValidity("")
    		}
    		var repwd = document.getElementById("passwordConfirm");
    		if(repwd.validity.valueMissing){
    			repwd.setCustomValidity("必填")
    		}else if(repwd.value!=pwd.value){
    			repwd.setCustomValidity("两次密码不一致")
    		}else{
    			repwd.setCustomValidity("")
    		}
    		var email = document.getElementById("email");
    		if(email.validity.valueMissing){
    			email.setCustomValidity("邮箱不能为空")
    		}else if(email.validity.patternMismatch){
    			email.setCustomValidity("邮箱格式不匹配")
    		}else{
    			email.setCustomValidity("")
    		}
    	})
    	$("#username").blur(function(){
    		$.get("register",{username:$("#username").val()},function(text){
    			$("#username").next("span").text(text=="true"?"用户名已存在":"")
        	})
    	})
    })
    
    </script>
</head>
<body>
<div class="both">
    <div class="header">
        <div class="container">
            <div class="nav">
                <p>
                    <a href="login.html" >登陆</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a>注册</a>
                </p>
                <p>|&nbsp;符合人类进步的食品</p>
                <p>
                    <a href="index.html">首页</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="productList.html">蛋糕名录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="#">品牌故事</a>
                </p>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <form action="register.html" method="post">
                <p>用户注册</p>
                <input type="text" placeholder="输入用户名" name="username" id="username" class="showBox" required pattern="[a-zA-Z0-9_-]{4,16}"><span class="error"></span><br>
                <input type="password" placeholder="输入密码" name="password" id="password" class="showBox" required pattern="[a-zA-Z0-9]{6,16}"><br>
                <input type="password" placeholder="确认密码" id="passwordConfirm" class="showBox" required><br>
                <input type="email" placeholder="输入email" name="email" id="email" class="showBox" required><br>
                <input type="submit" value="登陆" class="subForm">

            </form>
        </div>
    </div>
    <div class="footer">
        <hr>
        <div class="container">
            <div>
                <p>©2005-2014&nbsp;21Cake官网版权所有，并保留所有权利</p>
                <ul>
                    <li><a href="#">联系我们</a> &nbsp;</li>
                    <li><a href="#">售后流程</a> &nbsp;</li>
                    <li><a href="#">订购方式</a> &nbsp;</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>